<template>
  <div class="container">

    <sq-header :selected="2"></sq-header>

    <div class="me" v-if="islogin">
      <img src="../assets/avtar.png">
      <div class="info">
        <div class="info-welcome">
          <div class="info-welcome-phone">{{lastLoginPhone}}</div>
          <div class="info-welcome-tips">欢迎回来</div>
        </div>
        <div class="logout" @click="logout">
            退出登录
        </div>
      </div>
    </div>

    <ul class="course-list">
    	<sq-course-order v-for="(item, index) in myCourseItems" :item="item" :key="item.courseId" @clickCourse="goToCourseDetail(item)"></sq-course-order>
    </ul>

  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex';
import { logout} from '../api/index'
import SqHeader from '../components/Header'
import SqCourseOrder from '../components/CourseOrder'
Vue.component(SqHeader.name, SqHeader)
Vue.component(SqCourseOrder.name, SqCourseOrder)
import {getMyCourse} from '../api/index'

export default {
  name: 'Index',
  data () {
    return {
      myCourseItems: [],
      accessTime: new Date().getTime()
    }
  },
  created () {
      this.refreshData();
  },
  methods: {
    refreshData() {
      var that = this;
      getMyCourse().then(function(resp){
        that.myCourseItems = resp.data;
      }).catch(function(err){
        console.log(err);
      });
    },
    goToCourseDetail(item) {
      this.$router.push({ name: 'Course', params: { id: item.courseId, randId: item.randId }})
    },
    logout() {
      const that = this;
      logout().then(function(resp){
        if(resp.code === 0){
          window._hmt.push(['_trackEvent', '登录', '退出登录']);
          that.$store.dispatch('logout');
          that.$router.replace({ name: 'Index'});
        }else{
          window._hmt.push(['_trackEvent', '登录', '退出失败', resp.msg ]);
          console.log(resp.msg);
        }
      }).catch(function(err){
        console.log(err);
      });
    }
  },
  watch: {
    islogin: function(newValue) {
      if(!newValue){
        this.$store.dispatch("toggleLoginBox");
      }else{
        // 防止刷新这个页面，refreshData调用两次
        const now = new Date().getTime();
        if(now - this.accessTime > 3000 ) {
          this.refreshData();
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'islogin',
      'lastLoginPhone'
    ])
  }
}
</script>

<style scoped>

  .container {
  	width: 100%;
  	height: 100%;
  	margin: 0px;
  	padding: 0px;
  }

  .me {
    display: flex;
    height: 93px;
    align-items: center;
    background-color: #F7F7F7;
    border-bottom: 1px solid #cccccc;
  }

  .me img {
    width: 52.5px;
    height: 52.5px;
    margin-left: 12px;
    margin-right: 12px;
  }

  .info {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    padding-right: 10px;
  }

  .info-welcome {
    text-align: left;
    font-size: 16px;
  }

  .info-welcome-phone {
    color:#666666;
    margin-bottom: 2px;
  }

  .info-welcome-tips {
    color:#999999;
  }

  .logout {
    display: flex;
    align-items: center;
    color: #e00;
  }

  .course-list {
    padding: 0px;
    margin: 0px;
  }

</style>
